<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百顺通云-提交订单并支付</title>
<link rel="shortcut icon" href="/images/user/favicon.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/user/buy/css.css" />
<link type="text/css" rel="stylesheet" href="/css/dialog.min.css" />
<!-- 局部CSS  -->
<link type="text/css" rel="stylesheet" href="/css/user/buy/uporder.css" />
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src = "/js/dialog.min.js"></script>
<script type="text/javascript" src = "/js/bstdialog.min.js"></script>
<script type="text/javascript" src="/js/member-center.js"></script>
<script type="text/javascript" src="/js/user/buy/submitOrders.js"></script>

<script language="JavaScript">
       javascript:window.history.forward(1); 
</script>
<style type="text/css">
.success_orders{width:1157px;margin:30px auto;}
.account{width:1200px;margin:0 auto;}
#voucherNum{color: #999;}
input{border-color: #666!important;border-radius:5px;padding-left:4px;}

</style>
</head>

<body onload="javascript:assignAutoComputer()">
<div class="Wrapper">
	<!--购物车头部-->
	<jsp:include page="../../common/buy/buy_header.jsp"></jsp:include>
	<!--购物车头部-->
	
    <!--会员中心中间部分-->
    <div class="uc_bd mt20 mb20 ">
    	<div>
        	<!--购物车步骤开始-->
        	<!--升级步骤开始-->
        	<div class="across_box">
	        	<div class="y-span3 box_size cle">
					<h1 class="uc-title" title="确认订单">支付</h1>
				</div>
			</div>
            <div class="process_bar box_size">
				<!-- 支付 -->
				<div class="uc-process">
					<span class="unit past w307">确认订单</span>
					<span class="arrow-complete">
						<span class="next"></span>
						<span class="prev"></span>
					</span>
					<span class="unit current w307">支付</span>
					<span class="arrow-current">
						<span class="next"></span>
						<span class="prev"></span>
					</span>
					<span class="unit w306">支付成功</span>
				</div>
			</div>
            <!--购物车步骤结束-->
            <!--订单成功开始-->
            <div class="success_orders mt20">
            	<h2>恭喜您，已成功提交订单，请尽快完成支付！</h2>
            	<input type="hidden" name="orderId" value="${order.orderId}">
            	<input type="hidden" name="orderNum" value="${order.orderNum}">
            	<input type="hidden" name="proMealName" value="${proMealName}">
                <p>订单号：<font color="#ff0000">${order.orderNum}</font>      应付金额：<font color="#008fb5" id="orderMoney"><fmt:formatNumber value="${order.orderMoney}" pattern="#0.00"/></font> 元</p>
                <p><input type="checkbox" name="isVoucher" class="isVoucher">
                <input type="text" name="voucherNUm" id="voucherNum" value="输入代金券编号" readonly="readonly" style="border: 1px solid #ccc;height:25px;margin-left:10px">
                <span id="showVoucherMoney" style="margin-left: 10px;" hidden="true"><label>代金券金额为：<font id="voucherMoney">0.00</font>元</label></span>
                </p>
                <!-- <p>请您在提交订单后24小时内完成支付，否则订单会自动取消。</p> -->
            </div>
            <!--订单成功结束-->
            <!--选择支付方式开始-->
			<div class="account shopping mt20">
                <div class="uitopb uitopb_border">
                	<div class="contents">
                   	  	<h2>请选择支付方式</h2>
                      	<div class="payers">
               		    <ul class="balances">
                            	<li class="select">
                            	  <input name="checkboxAccount" type="checkbox" id="checkboxAccount" checked="checked" />
                            	  <input name="userId" type="hidden" value="${userInfo.userId}">
                            	  <label for="checkbox"><b>账户余额支付</b></label>
                            	</li>
                                <li class="balance" >账户可支付余额：
                                	<font color="#008fb5">
                                		<b  id="accountMoney">
                                			<fmt:formatNumber value="${userInfo.accountMoney}" pattern="#0.00"/>
                                		</b>
                                	</font> 元
                                </li>
                                <li class="payment">支付：<font color="#008fb5"><b id="payByAccountMoney">0.00</b></font> 元</li>
                                <div class="clear"></div>
                            </ul>
                      	</div>
                        <!--支付切换开始-->
                        <script type="text/javascript">
							function nTabs(thisObj,Num){
								if(thisObj.className == "on")return;
								var tabObj = thisObj.parentNode.id;
								var tabList = document.getElementById(tabObj).getElementsByTagName("li");
								for(i=0; i <tabList.length; i++) {
								  if (i == Num)
								  {
								   thisObj.className = "active"; 
									  document.getElementById(tabObj+"_Content"+i).style.display = "block";
								  }else{
								   tabList[i].className = "sta"; 
								   document.getElementById(tabObj+"_Content"+i).style.display = "none";
								  }
								}
							}
						</script>
                        <div class="payment_tab_label mt20">
                        	<ul class="balances mb10">
                            	<li class="select">
                            	  <input name="checkbox" type="checkbox" id="checkboxOther" checked="checked" />
                            	  <label for="checkbox"><b>第三方支付</b></label>
                            	</li>
                                <li class="payment" >支付：<font color="#008fb5"><b id="payByOther">0</b></font> 元</li>
                                <div class="clear"></div>
                            </ul>
                        	<div class="title_bar">
                              	<ul class="tabs" id="myTab">
                                    <li class="active" onclick="nTabs(this,0);"><a href="#tab1">线上支付</a></li>
                                    <li class="sta" onclick="nTabs(this,1);"><a href="#tab2">线下支付</a></li>
                                    <!-- <li class="sta" onclick="nTabs(this,1);"><a href="#tab2">快捷支付</a></li>
                                    <li class="sta" onclick="nTabs(this,2);"><a href="#tab3">网上银行</a></li> -->
                            	</ul>
                          	</div>
                          	<style>
								.panel ul{width: 400px;}.panel ul li{float: left;}
								.panel p input{border: 1px solid gray;}
							</style>
                            <div class="tab_container">
                            	<div id="myTab_Content0" class="tab_content" style="display:block;">
                            		<span>
	                            	    <label>
	                            	      <input type="radio" name="payRadio" value="支付宝" id="alipayRadio" checked="checked" />
	                            	      <font style="font-size: 15px;">支付宝</font></label>
	                            	      <label>
	                            	       <input type="radio" name="payRadio" value="个人网银" id="chinapayRadio" />
	                            	     <font style="font-size: 15px;">个人网银</font></label>
	                            	   <label>
	                            	       <input type="radio" name="payRadio" value="企业支付" id="chinapayB2BRadio" />
	                            	   <font style="font-size: 15px;"> 企业支付</font></label>
	                            	     <label>
	                            	       <input type="radio" name="payRadio" value="银联B2C支付" id="chinapayB2CRadio" />
	                            	     <font style="font-size: 15px;">银联B2C支付</font></label>
                            	     </span><br>
                            	    <div class="payment_btn mt20 cle">
                            	    	<a href="javascript:payOrder();" class="payment_next_btn"  style="margin-left: 0px;margin-bottom: 20px;margin-top: 40px;">下一步</a></div>
                                    <div class="clear"></div>
                           	  	</div>
                           	  	<div id="myTab_Content1" class="tab_content" style="display:none;">
                            		<div class="panel">
		                            	<span style="margin-left: 40px">
		                            	    <label>
		                            	    	<font style="font-size: 14px;" ><strong>单位名称：</strong></font>
		                            	    	<font id="mineCompanyName">${BSTCOMPANYINFO.bstCompanyName}<!-- 浙江百顺通信息科技有限公司 --></font>
		                            	    </label><br>
		                            	</span><br>
		                            	<span style="margin-left: 40px">    
		                            		<label><font style="font-size: 14px;" ><strong>开户行：</strong></font>
		                            	    	<font id="mineBankName">${BSTCOMPANYINFO.bstBankNname}<!-- 杭州银行西城支行 --></font>
		                            	    </label><br>
		                            	</span><br>
		                            	<span style="margin-left: 40px">
		                            		<label><font style="font-size: 14px;" ><strong>账号：</strong></font>
		                            	    	<font id="mineAccountNum">${BSTCOMPANYINFO.bstAccount}<!-- 3301040160001947012 --></font>
		                            	    </label><br>
	                            	    </span><br>
	                            	    <div class="mt20"  style="margin-left: -40px">
											<input type="button" name="button" id="next" value="下一步" class="basicbtn"/>
		                                    <div class="clear"></div> 
		                           	  	</div>
	                           	  	</div>
	                           	  	
	                           	  	<div class="panel" style="display:none;">
	                           	  		<div class="cle">
		                            	    <label style="width: 250px;">
		                            	    	<font style="font-size: 14px;" ><strong>注册账号:</strong></font>
		                            	    	<font style="font-size: 14px;" id="loginUserName">
			                            	   		<c:if test="${loginWay=='email'}">${userInfo.userEmail}</c:if>
		            								<c:if test="${loginWay=='tel'}">${userInfo.userTel}</c:if>
	            								</font>
	            							</label>
		                            	    <label>
		                            	    	<font style="font-size: 14px;" ><strong>订单编号:</strong></font>
		                            	    	<font style="font-size: 14px;" id="loginUserOrderNum">${order.orderNum}</font>
		                            	    </label><br>
		                            	</div>
		                            	<div class="cle">    
		                            		<label style="width: 250px;">
		                            			<font style="font-size: 14px;" ><strong>产品名称:</strong></font>
		                            			<font style="font-size: 14px;" id="loginUserProMealName">${proMealName}</font>
		                            		</label>
		                            		<label>
		                            			<font style="font-size: 14px;" ><strong>实付金额:</strong></font>￥
		                            			<font style="font-size: 14px;" id="loginUserPrice"><fmt:formatNumber value="${order.orderMoney}" pattern="#0.00"/></font>
		                            		</label><br>
		                            	</div>
		                            	<div class="cle">
		                            		<label>
		                            			<font style="font-size: 14px;" ><strong>付款单位全称：</strong></font>
		                            			<input type="text"  id="loginUserUnitAllName" style="border: 1px solid;height: 30px;font-size: 15px;width: 280px;" placeholder="需和银行开户名称保持一致"/>
		                            		</label>
		                            		
		                            		<label  class="domain_error" style="color: red;margin-left: -65px;font-size: 15px;"></label>
		                            	</div>
		                            	<div class="cle">
		                            		<label><font style="font-size: 14px;" ><strong>联系人：</strong></font>
		                            			<input type="text" id="orderLinkMan" placeholder="请填写有效联系人" style="border: 1px solid;height: 30px;font-size: 15px;margin-left: 42px;width: 280px;"/>
		                            		</label>
		                            		<label  class="domain_error" style="color: red;margin-left: -65px;font-size: 15px;"></label>
		                            	</div>
		                            	<div class="cle">
		                            		<label><font style="font-size: 14px;" ><strong>联系电话：</strong></font>
		                            			<input type="text" id="orderLinkPhone" placeholder="请填写有效联系电话" style="border: 1px solid;height: 30px;font-size: 15px;margin-left: 28px;width: 280px;"/>
		                            		</label>
		                            		<label  class="domain_error" style="color: red;margin-left: -65px;font-size: 15px;"></label>
		                            	</div>
		                            	<div class="cle">
		                            		<label><font style="font-size: 14px;" ><strong>确认邮箱:</strong></font>
		                            			<input type="text" id="orderLinkEmail" placeholder="该邮箱用于发送凭证" style="border: 1px solid; height: 30px;font-size: 15px;margin-left: 38px;width: 280px;" />
		                            		</label>
		                            		<label  class="domain_error" style="color: red;margin-left: -65px;font-size: 15px;"></label>
	                            	    </div>
	                            	    <div  class="cle"><input type="button" name="button" id="submit" value="确认信息并发送" class="basicbtn" style="margin-left: 0px;"/>
							            <input type="button" name="button" id="back" value="返回上一步" class="basicbtn"/></div>
		                           	</div>
	                           	 </div>
              	      		</div>
                            <div class="clear"></div>
                        </div>
                        <!--支付切换结束-->
                        
                        <div class="clear"></div>
                  	</div>
                </div>
            </div>
            <!--选择支付方式结束-->
      	</div>
    </div>
    <!--会员中心中间部分-->
    <!---------------------------------footer------------------------------------>
  	<jsp:include page="../../common/footer.jsp"/>
  	<!---------------------------------footer结束------------------------------------>
</div>
</body>
</html>